<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <!-- <el-form-item>
          <el-input v-model="filters.name" placeholder="姓名"></el-input>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" v-on:click="getRedisConfigs">刷新</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="redisConfigs"
      highlight-current-row
      v-loading="listLoading"
      element-loading-text="数据加载中. . ."
      @selection-change="selsChange"
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="host" label="IP"></el-table-column>
      <el-table-column prop="port" label="端口"></el-table-column>
      <!-- <el-table-column prop="password" label="密码"></el-table-column> -->
      <el-table-column prop="env" label="环境">
        <template slot-scope="scope">
          <span v-html="formatterEnv(scope.row.env)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch
            on-text="启用"
            off-text="停用"
            v-model="scope.row.status"
            @change="handleSwitch(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="20"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog
      title="编辑"
      v-model="editFormVisible"
      v-if="editFormVisible"
      :visible.sync="editFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" auto-complete="off" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="IP" prop="host">
          <el-input v-model="editForm.host" auto-complete="off" placeholder="请输入IP"></el-input>
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input type="number" v-model="editForm.port" auto-complete="off" placeholder="请输入端口"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="环境">
          <el-radio-group v-model="editForm.env">
            <!-- <el-radio label="线上" name="prod"></el-radio>
            <el-radio label="测试" name="test"></el-radio>
            <el-radio label="开发" name="dev"></el-radio>
            <el-radio label="本地" name="local"></el-radio>-->
            <el-radio
              v-for="item in envs"
              :key="item.code"
              :value="item.code"
              :label="item.code"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch on-text="启用" off-text="停用" v-model="editForm.status"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="testConnSubmit2" :loading="testConnLoading">测试连接</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">保存</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog
      title="新增"
      v-if="addFormVisible"
      :visible.sync="addFormVisible"
      v-model="addFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" auto-complete="off" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="IP" prop="host">
          <el-input v-model="addForm.host" auto-complete="off" placeholder="请输入IP"></el-input>
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input type="number" v-model="addForm.port" auto-complete="off" placeholder="请输入端口"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="环境">
          <el-radio-group v-model="addForm.env">
            <!-- <el-radio label="线上" name="prod"></el-radio>
            <el-radio label="测试" name="test"></el-radio>
            <el-radio label="开发" name="dev"></el-radio>
            <el-radio label="本地" name="local"></el-radio>-->
            <el-radio
              v-for="item in envs"
              :key="item.code"
              :value="item.code"
              :label="item.code"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch on-text="启用" off-text="停用" v-model="addForm.status"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="testConnSubmit" :loading="testConnLoading">测试连接</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">保存</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import util from "../../common/js/util";
//import NProgress from 'nprogress'
import {
  getRedisConfigList,
  addRedisConfig,
  editRedisConfig,
  enableRedisConfig,
  disableRedisConfig,
  deleteRedisConfig,
  testConnRedisConfig
} from "../../api/api";

export default {
  data() {
    return {
      filters: {
        name: ""
      },
      envs: [
        {
          code: "prod",
          name: "线上"
        },
        {
          code: "test",
          name: "测试"
        },
        {
          code: "dev",
          name: "开发"
        },
        {
          code: "local",
          name: "本地"
        }
      ],
      redisConfigs: [],
      total: 0,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列
      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        host: [{ required: true, message: "请输入IP", trigger: "blur" }],
        port: [
          {
            type: "number",
            required: true,
            message: "请输入端口",
            trigger: "blur"
          }
        ]
      },
      //编辑界面数据
      editForm: {
        name: "",
        host: "",
        port: "",
        password: "",
        env: "",
        status: true
      },
      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      testConnLoading: false,
      addFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        host: [{ required: true, message: "请输入IP", trigger: "blur" }],
        port: [
          {
            required: true,
            message: "请输入端口",
            trigger: "blur"
          }
        ]
      },
      //新增界面数据
      addForm: {
        name: "",
        host: "",
        port: 6379,
        password: "",
        env: "local",
        status: true
      }
    };
  },
  created() {
    this.getRedisConfigs();
  },
  methods: {
    // 环境显示转换
    formatterEnv: function(val) {
      if (val === "prod") {
        return "<font color='#009688'>●</font>线上";
      }
      if (val === "test") {
        return "<font color='#FF5722'>●</font>测试";
      }
      if (val === "dev") {
        return "<font color='#1E9FFF'>●</font>开发";
      }
      if (val === "local") {
        return "<font color='#393D49'>●</font>本地";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getUsers();
    },
    getRedisConfigs() {
      this.listLoading = true;
      getRedisConfigList().then(res => {
        this.listLoading = false;

        // console.log(res);

        this.redisConfigs = res.data;
      });
    },
    handleSwitch(row) {
      if (row.status) {
        enableRedisConfig(row.host)
          .then(res => {
            this.listLoading = false;
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
            } else {
              row.status = !row.status;
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          })
          .catch(err => {
            this.$message({
              message: err.msg,
              type: "error"
            });
          });
      } else {
        disableRedisConfig(row.host)
          .then(res => {
            this.listLoading = false;
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
            } else {
              row.status = !row.status;
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          })
          .catch(err => {
            this.$message({
              message: err.msg,
              type: "error"
            });
          });
      }
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;

          deleteRedisConfig(row.host).then(res => {
            this.listLoading = false;
            this.$message({
              message: res.msg,
              type: res.code == 200 ? "success" : "error"
            });

            this.getRedisConfigs();
          });
        })
        .catch(() => {});
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      // console.log(row)
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
      this.addForm = {
        name: "",
        host: "",
        port: 6379,
        password: "",
        env: "local",
        status: true
      };
    },
    //编辑
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        // console.log(valid)
        if (valid) {
          this.$confirm("确认提交吗？", "提示", { type: "warning" }).then(
            () => {
              this.editLoading = true;
              //NProgress.start();
              let param = Object.assign({}, this.editForm);
              console.log(param);
              editRedisConfig(param).then(res => {
                this.editLoading = false;
                //NProgress.done();
                this.$message({
                  message: res.msg,
                  type: res.code == 200 ? "success" : "error"
                });
                // 判断是否清空编辑页面表单 并 关闭页面 加载数据
                if (res.code == 200) {
                  this.$refs["editForm"].resetFields();
                  this.editFormVisible = false;
                  this.getRedisConfigs();
                }
              });
            }
          );
        }
      });
    },
    //新增
    addSubmit: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", { type: "warning" }).then(
            () => {
              // this.addLoading = true;
              let param = Object.assign({}, this.addForm);
              // console.log(param);

              addRedisConfig(param).then(res => {
                this.addLoading = false;

                this.$message({
                  message: res.msg,
                  type: res.code == 200 ? "success" : "error"
                });

                if (res.code == 200) {
                  // 重置新增页面
                  this.$refs["addForm"].resetFields();
                  this.addFormVisible = false;
                  this.getRedisConfigs();
                }
              });
            }
          );
        }
      });
    },
    // 测试连接
    testConnSubmit2: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.testConnLoading = true;
          let param = Object.assign({}, this.editForm);

          testConnRedisConfig(param).then(res => {
            this.testConnLoading = false;

            this.$message({
              message: res.msg,
              type: res.code == 200 ? "success" : "error"
            });

          });
        }
      });
    },
    // 测试连接
    testConnSubmit: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.testConnLoading = true;
          let param = Object.assign({}, this.addForm);

          testConnRedisConfig(param).then(res => {
            this.testConnLoading = false;

            this.$message({
              message: res.msg,
              type: res.code == 200 ? "success" : "error"
            });

          });
        }
      });
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function() {
      var ids = this.sels.map(item => item.id).toString();
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { ids: ids };
          batchRemoveUser(para).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getUsers();
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    // this.getRedisConfigs();
  }
};
</script>

<style scoped>
</style>


// WEBPACK FOOTER //
// RedisConfig.vue?d93a5ce8